export const imagePreview = {
    inserted(el) {
      var img = new Image();
      img.src = el.src;
      console.log(el)
    //   console.log(el.getElementsByTagName("img"))
      if (!el.src) return;
      // 创建一个loading的img标签
      let loadImg = document.createElement("img");
      loadImg.classList.add("img-loading");
      loadImg.src = require("../img/404.png");
      el.appendChild(loadImg);  // 插入dom
      el.style.background = "#F0F4F8";
  
      img.onload = () => {
        el.removeChild(loadImg); // 加载成功移除loading
        el.style.background = "";
      };
      // 原图片加载出错
      img.onerror = () => {
        // 故意做的延时方便展示
        setTimeout(() => {
          el.classList.add("display-flex");
          el.style.background = "#333";
          el.innerHTML = `<span style="color: #fff;">图片已过期<br>无法查看</span>`;
        }, 1000)
      };
    },
    update(el) {
      var img = new Image();
      img.src = el.src;
      img.onerror = () => {
        el.classList.add("display-flex");
        el.style.background = "#333";
        el.innerHTML = `<span style="color: #fff;">图片已过期<br>无法查看</span>`;
      };
    }
  };